<template>
	<view class="vipData">
		<view class="news">
			<h1>VIP最新推荐</h1>
			<scroll-view class="scroll-view_H recommend" scroll-x="true">
				<view class="recommend-item" v-for="item in menu" :key="item._id"  @click="toMix(item._id)">
					<view class="top">
						<image :src="item.coverpic"></image>
						<image src="../static/img/zu488@2x.png" class="time"></image>
					</view>
					<h3>{{item.name}}</h3>
					<view class="bottom">
						<view class="left">
							<text>{{item.pageview}}</text>
							<image src="/static/img/liulam @2x.png"></image>
						</view>
						<view class="right">
							<text>{{item.collections}}</text>
							<image src="/static/img/soucang@2x.png" mode=""></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="news">
			<h1>限时免费体验</h1>
			<scroll-view class="scroll-view_H recommend" scroll-x="true">
				<view class="recommend-item" v-for="item in free" :key="item._id">
					<view class="top">
						<image :src="item.coverpic"></image>
						<image src="../static/img/zu488@2x.png" class="time"></image>
					</view>
					<h3>{{item.name}}</h3>
					<view class="bottom">
						<view class="left">
							<text>{{item.pageview}}</text>
							<image src="/static/img/liulam @2x.png"></image>
						</view>
						<view class="right">
							<text>{{item.collections}}</text>
							<image src="/static/img/soucang@2x.png" mode=""></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="like">
			<h1>猜你喜欢</h1>
			<view class="recommend">
				<view class="recommend-item" v-for="item in like" :key="item._id">
					<view class="top">
						<image :src="item.coverpic"></image>
					</view>
					<h3>{{item.name}}</h3>
					<view class="bottom">
						<view class="left">
							<text>{{item.pageview}}</text>
							<image src="/static/img/liulam @2x.png"></image>
						</view>
						<view class="right">
							<text>{{item.collections}}</text>
							<image src="/static/img/soucang@2x.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getVipNewsApi,
		getVipFreeApi,
		getVipLikeApi
	} from "../apis/vip.js"
	export default {
		data() {
			return {
				menu: [],
				free: [],
				like: []
			}
		},
		created() {
			this.vipFoodsData()
		},
		methods: {
			vipFoodsData() {

				if (uni.getStorageSync('token')) {
					getVipNewsApi().then((res) => {
						this.menu = res.menus
						
					})
					getVipFreeApi().then((res) => {

						this.free = res.menus
					})
					getVipLikeApi().then((res) => {
						this.like = res.menus

					})
				}


			},
			toMix(id){
				
				uni.navigateTo({
				    //url:"../car/car?id=1",
				    //url:"../car/car?id="+id
				    url:`/pages/foodsMessage/foodsMessage?_id=${id}`
					// url:`/pages/foodStep/foodStep?_id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vipData {
		padding-left: 32rpx;

		.news {
			margin-bottom: 38rpx;
		}

		.recommend {
			// display: grid;
			// grid-template-columns: repeat(2,1fr);
			// gap: 10rpx;
			// padding: 20rpx;
			// box-sizing: border-box;
			white-space: nowrap;
			width: 100%;
			margin-top: 28rpx;

			.recommend-item {
				display: inline-block;
				// width: 100%;
				// height: 300rpx;
				// line-height: 300rpx;
				// text-align: center;

				margin-right: 12rpx;
				color: black;

				.top {
					width: 314rpx;
					height: 220rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					.time {
						position: absolute;
						bottom: 12rpx;
						right: 10rpx;
						width: 82rpx;
						height: 24rpx;
					}
				}

				.bottom {
					display: flex;

					.left {
						text {
							font-size: 28rpx;
							color: gray;
						}

						image {
							width: 34rpx;
							height: 28rpx;
							vertical-align: middle;
						}
					}

					.right {
						text {
							font-size: 28rpx;
							color: gray;
						}

						image {
							width: 34rpx;
							height: 28rpx;
							vertical-align: middle;
						}
					}
				}
			}
		}
	}

	.like {
		.recommend {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.recommend-item {
				.top {
					width: 100%;

					image {
						width: 100%;
					}
				}

				.bottom {
					display: flex;

					.left {
						text {
							font-size: 28rpx;
							color: gray;
						}

						image {
							width: 34rpx;
							height: 28rpx;
							vertical-align: middle;
						}
					}

					.right {
						text {
							font-size: 28rpx;
							color: gray;
						}

						image {
							width: 34rpx;
							height: 28rpx;
							vertical-align: middle;
						}
					}
				}
			}
		}
	}
</style>
